---
title: GLSL Shaders
description:
  GLSL shaders are small programs that are ran on the GPU. When imported they
  have their include statements resolved and are then available as a string for
  you to forward on to Three.js.
---

GLSL shaders are small programs that are ran on the GPU. When importing a GLSL
file with an extension of `glsl`, `wgsl`, `vert`, `frag`, `vs`, or `fs`, they
have their include statements resolved and are then available as a string for
you to forward on to Three.js.

Import them:

```tsx
import frag from "./fragment.glsl";
import vert from "./vertex.glsl";
```

And use them as needed, for example here it's used with
[`three-custom-shader-material`](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial):

```diff
import CustomShaderMaterial from "three-custom-shader-material";

export function WaterMaterial({
  color,
  wavelength = 1,
  speed = 1,
}: {
  color?: Color;
  wavelength?: number;
  speed?: number;
}) {
  const ref = useRef(null);

  useFrame((_, delta) => {
    ref.current.uniforms.u_windTime.value +=
      ref.current.uniforms.u_windSpeed.value * delta;
  });

  const uniforms = useMemo(() => {
    return {
      u_windSpeed: { value: 0.1 * speed },
      u_windTime: { value: 0.0 },
    };
  }, [speed]);

  return (
    <CustomShaderMaterial
      baseMaterial={MeshStandardMaterial}
      color={color}
+      fragmentShader={frag}
+      vertexShader={vert}
      ref={ref}
      metalness={0.1}
      transparent
      uniforms={uniforms}
    />
  );
```
